<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="我的订单" left-arrow @click-left="$router.go(-1)" />
        </header>
        <main class="content">
            <van-tabs v-model:active="active" @change="onChange">
                <van-tab title="全部"></van-tab>
                <van-tab title="待付款"></van-tab>
                <van-tab title="待发货"></van-tab>
                <van-tab title="标签 4">内容 4</van-tab>
                <van-tab title="标签 5">内容 5</van-tab>
                <van-tab title="标签 6">内容 6</van-tab>
            </van-tabs>
            <van-swipe-cell v-for="item in list" :key="item.id" style="margin-bottom:20px;">
                <div style="display:flex;justify-content: space-between;margin:10px;font-size:14px;">
                    <h4>订单号： {{ item.title }}</h4>
                    <p>{{ item.status == 1 ? '待付款' : '待发货' }}</p>
                </div>
                <van-card v-for="el in item.orderList" :key="el.id" :num="el.count" :price="el.price" title="商品标题"
                    :thumb="el.image" />
                <h5 style="text-align: right;color:red">订单总金额：￥{{ item.price }}</h5>
            </van-swipe-cell>
        </main>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useCounterStore } from '@/stores/counter';
import { useRoute } from 'vue-router';
const route = useRoute();
const store = useCounterStore();
const active = ref(0);
const list = ref([])
const onChange = (index) => {
    if (index == 0) {
        list.value = store.myorderList
    } else {
        list.value = store.myorderList.filter(item => item.status == index) // index是1，status为待付款
    }
}
onMounted(() => {
    active.value = Number(route.query.status) // 浏览器地址栏传过来的参数是字符串类型
    onChange(active.value)
})
</script>
